JohnyMag | Documentation

1. Backup & Uploading

Unzip the Template.zip file.
On Blogger Dashboard Click Template.
Click on Download Full Template to keep your old template.
Click Browse... button. Find where the “Template.xml” file location.
Then Click Upload.
Edit mobile Preveiw. (follow images).

After installing the theme, there are minimun settings to make all widgets work fine in this template.

2. Blog Feed

On Blogger Dashboard Click Settings.
Click Other.
In Site Feed > Allow Blog Feed Choose Full.
Then Click Save settings.

Now you can Edit the meta tag Keywords of your blog. follow this steps

On Blogger Dashbord Click Template.
Click Edit HTML.
Click Ctrl + F and Search for the following Code:

<meta content='Keywords_Here' name='keywords'/>

Change Keywords_Here with your blog keywords you want to use.
Click Save template.

Header Logo.
Header Ads 468 x 60 Pixel.
Posts Title Ticker.
Big Top Carousel.

1. Setting Main Blog Part

On Blogger Dashboard Click Layout.

Click Edit on Blog Posts Widget.

Change it to look like that image.

Click Save.

2. Posts Title Ticker

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<script type="text/javascript">
var numposts=18;
</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;callback=ticker' type='text/javascript'/></script>

numposts	Number of posts titles to be shown. It must be lower or equal to the all number of posts in your blog.

3. Big Top Carousel

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<script type="text/javascript">
var numpostso = 15;
var classo = "owl-carousel owl-theme";
var ido = "big_carousel";
</script>
<script src='/feeds/posts/default/-/slider?alt=json-in-script&amp;callback=ocarousel' type='text/javascript'/></script>

slider	Add This label name to posts you want them to be shown.
numposts	Number of posts to be shown. It must be lower or equal to the number of posts that have the label name `slider`.

4. Labeled Posts

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<script type="text/javascript">
var numpostsq=2;
</script>
<script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=eqposts" type="text/javascript"></script>

LABEL_NAME	Change it with the label name of posts to be shown.
numpostsq	Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<script type="text/javascript">
var nopost = 10;
</script>
<script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=galposts"></script>

LABEL_NAME	Change it with the label name of posts to be shown.
numpostsq	Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<script type="text/javascript">
var nopostw=7;
</script>
<script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=carouselw"></script>

LABEL_NAME	Change it with the label name of posts to be shown.
nopostw	Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<script type="text/javascript">
var nopostb = 5;
</script>
<script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=blockposts"></script>

LABEL_NAME	Change it with the label name of posts to be shown.
nopostb	Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<script type="text/javascript">
var nopostr = 5;
</script>
<script src="/feeds/posts/default?alt=json-in-script&amp;callback=recentposts"></script>

nopostr	Number of posts to be shown. It must be lower or equal to the number of posts in your blog.

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<div id="random-posts">

<script style="text/javascript">
 var numposts_gal = 4;
</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=99"></script>
</div>

numposts_gal	Number of posts to be shown.

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<div id="comments-container"></div>
<script>
var cm_config = {
ct_id: "comments-container",
max_result: 5
};
</script>

max_result	Number of recent comments to be shown.

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<script type="text/javascript">
var numpostso = 4;
var classo = "gallery_widget gallery_widget_posts owl-carousel owl-theme";
var ido = "footer_carousel";
</script>
<script src='/feeds/posts/default/-/slideshow?alt=json-in-script&amp;callback=ocarousel' type='text/javascript'/></script>

slideshow	Add This label name to posts you want them to be shown.
numpostso	Number of posts to be shown. It must be lower or equal to the number of posts that have the label name `slideshow`.

5. Social Icons

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<div class="social with_color">
  <a title="Follow us on twitter" rel="nofollow" class="toptip" href="#" target="_blank"><i class="fa fa-twitter"></i></a>
  <a title="Like us on facebook" rel="nofollow" class="toptip" href="#" target="_blank"><i class="fa fa-facebook"></i></a>
  <a title="Follow us on dribbble" rel="nofollow" class="toptip" href="#" target="_blank"><i class="fa fa-dribbble"></i></a>
  <a title="Follow us on Google+" rel="nofollow" class="toptip" href="#" target="_blank"><i class="fa fa-google-plus"></i></a>
  <a title="Foursquare" rel="nofollow" class="toptip" href="#" target="_blank"><i class="fa fa-foursquare"></i></a>
  <a title="Follow us on Soundcloud" rel="nofollow" class="toptip" href="#" target="_blank"><i class="fa fa-cloud"></i></a>
  <a title="Flickr" rel="nofollow" class="toptip" href="#" target="_blank"><i class="fa fa-flickr"></i></a>
</div>

#	Change `#` with your links.

Followers Numbers	Change this number to yours.

5. Ad Widgets

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/Javascript.
Copy the following Code:

<div class='ads'><center>
YUOR_ADS_CODE
</center></div>

YUOR_ADS_CODE	Change it with ads codes.

<div class='adst'><center>
YOUR_ADS_CODE
</center></div>

YUOR_ADS_CODE	Change it with ads codes.

<div class="arqam-widget-counter arq-flat arq-col3"><ul>	
  <li class="arq-facebook">
    <a href="#" target="_blank" rel="nofollow">
      <i class="fa fa-facebook"></i>
      <span>3,140</span>
      <small>Fans</small>
    </a>
  </li>
  <li class="arq-twitter">
    <a href="#" target="_blank" rel="nofollow">
      <i class="fa fa-twitter"></i>
      <span>1,890</span>
      <small>Followers</small>
    </a>
  </li>
  <li class="arq-github">
    <a href="#" target="_blank" rel="nofollow">
      <i class="fa fa-github"></i>
      <span>24</span>
      <small>Followers</small>
    </a>
  </li>
  <li class="arq-rssfeed">
    <a href="#" target="_blank" rel="nofollow">
      <i class="fa fa-rss"></i>
      <span>52k</span>
      <small>Subscribers</small>
    </a>
  </li>
  <li class="arq-youtube">
    <a href="#" target="_blank" rel="nofollow">
      <i class="fa fa-youtube"></i>
      <span>391k</span>
      <small>Subscribers</small>
    </a>
  </li>
  <li class="arq-dribbble">
    <a href="#" target="_blank" rel="nofollow">
      <i class="fa fa-dribbble"></i>
      <span>544</span>
      <small>Followers</small>
    </a>
  </li>
</ul></div>

1. Navigation Menu

Top Navigation Menu.

On Blogger Dashbord Click Template.
Click Edit HTML.
Click Ctrl + F and Search for the following Code:

  <ul class='sf-menu res_mode sf-js-enabled sf-shadow'><!-- Top Navigation Menu -->
	<li><a href='/'><i class='fa fa-home'/></a>
	</li>
	<li><a href='#'>Menu</a>
	  <ul class='sub-menu'>
		<li><a href='#'>Downloads</a></li>
		<li><a href='#'>Live Movies</a></li>
		<li><a href='#'>Online Chat</a></li>
	  </ul>
	</li>
	<li><a href='#'>Archive</a></li>
	<li><a href='#'>Label</a></li>
	<li><a href='#'>Error 404</a></li>
	<li><a href='#'><i class='fa fa-bars'/></a>
	  <ul class='sub-menu'>
		<li><a href='#'>Sports</a></li>
		<li><a href='#'>Action</a></li>
		<li><a href='#'>Travels</a></li>
		<li><a href='#'>Free Songs</a></li>
		<li><a href='#'>Food Types</a></li>
	  </ul>
	</li>
  </ul>

Change # with your links.
Click Save template.

Footer Navigation Menu.

On Blogger Dashbord Click Template.
Click Edit HTML.
Click Ctrl + F and Search for the following Code:

  <ul class='sf-menu sf-js-enabled sf-shadow curr'><!-- Footer Navigation Menu -->
	<li class='current-menu-item'><a href='/'>Home</a></li>
	<li><a href='#'>Post Style</a></li>
	<li><a href='#'>Label</a></li>
	<li><a href='#'>Archive</a></li>
	<li><a href='#'>Error 404</a></li>
	<li><a href='#'>Purchase</a></li>
  </ul>

Change # with your links.
Click Save template.

2. Social Icons

On Blogger Dashbord Click Template.
Click Edit HTML.
Click Ctrl + F and Search for the following Code:

  <div class='social'><!-- Social Icons -->
	<a class='bottomtip' href='#' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook '/></a>
	<a class='bottomtip' href='#' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/></a>
	<a class='bottomtip' href='#' rel='nofollow' target='_blank' title='Foursquare'><i class='fa fa-foursquare'/></a>
	<a class='bottomtip' href='#' rel='nofollow' target='_blank' title='Dribbble'><i class='fa fa-dribbble'/></a>
	<a class='bottomtip' href='#' rel='nofollow' target='_blank' title='Contact Us'><i class='fa fa-envelope-o'/></a>
  </div>

Change # with your links.
Click Save template.

The page is already integrated with template you don't need to do anything.

But if you would like to edit it Click `Ctrl` + `F` and Search for the following Code:

<div class='b_title'><!-- Error 404 Content -->
  <h3><i class='fa fa-warning'/> Page not found!</h3>
</div>

<div class='b_block error-page'>
  <h1 class='mbt mt'>Error 404 !</h1>
  <p>The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
  <form action='/search' class='searchform' method='get'>
      <input id='s' name='q' type='text' value=''/>
      <input class='search_btn' type='submit' value='Search'/>
  </form>
</div>

JohnyMag | Documentation [ Mastemplate.com ]

1. Backup & Uploading

After installing the theme, there are minimun settings to make all widgets work fine in this template.

2. Blog Feed

Now you can Edit the meta tag Keywords of your blog. follow this steps

1. Setting Main Blog Part

2. Posts Title Ticker

3. Big Top Carousel

4. Labeled Posts

5. Social Icons

5. Ad Widgets

1. Navigation Menu

Top Navigation Menu.

Footer Navigation Menu.

2. Social Icons

The page is already integrated with template you don't need to do anything.

But if you would like to edit it Click `Ctrl` + `F` and Search for the following Code:

Once Again, Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to contact me. Thanks so much!

JohnyMag | Documentation [ Mastemplate.com ]

1. Backup & Uploading

After installing the theme, there are minimun settings to make all widgets work fine in this template.

2. Blog Feed

Now you can Edit the meta tag Keywords of your blog. follow this steps

1. Setting Main Blog Part

2. Posts Title Ticker

3. Big Top Carousel

4. Labeled Posts

5. Social Icons

5. Ad Widgets

1. Navigation Menu

Top Navigation Menu.

Footer Navigation Menu.

2. Social Icons

The page is already integrated with template you don't need to do anything.

But if you would like to edit it Click Ctrl + F and Search for the following Code:

Once Again, Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to contact me. Thanks so much!

But if you would like to edit it Click `Ctrl` + `F` and Search for the following Code: